<template>
    <view>
        <!-- pages/list/hot/hot.wxml -->
        <view class="topbox">
            <cu-custom :isShowicon="true" :isBack="true">
                <view slot="backText">返回</view>
                <view slot="content">最新</view>
            </cu-custom>
        </view>

        <view class="flex align-center flex-wrap margin-lr-sm justify-between margin-top">
            <view class="listitem" @tap="gotoPlay" :data-id="item.id" v-for="(item, indexs) in list" :key="indexs">
                <view class="listimage">
                    <image :src="item.vertical_cover" mode="heightFix"></image>
                </view>

                <view class="listbot padding-lr-xs flex align-center">
                    <view v-if="item.tag == '热门'" class="cu-tag radius sm bg-orange">{{ item.tag }}</view>
                    <view v-if="item.tag == '推荐'" class="cu-tag radius sm bg-green">{{ item.tag }}</view>
                    <text class="margin-left-xs text-black">{{ item.title }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/list/hot/hot.js
const _api = require('../../../utils/api.js');
const apiurl = require('../../../utils/apiurl/public.js');
export default {
    data() {
        return {
            list: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.getVideolist();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        this.getVideolist();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        getVideolist() {
            //获取视频列表

            uni.showLoading({
                title: '数据加载中'
            });
            _api.get(apiurl.recom, {
                type: 'news_recom'
            }).then((res) => {
                console.log(res);
                uni.hideLoading();
                if (res.data.code == 0) {
                    this.setData({
                        list: res.data.data
                    });
                }
            });
        },

        gotoPlay(e) {
            //跳转到播放页
            let id = e.currentTarget.dataset.id;
            let page = '/pages/play/play?id=' + id;
            // console.log(id);
            uni.navigateTo({
                url: page
            });
        }
    }
};
</script>
<style>
/* pages/list/hot/hot.wxss */
page {
    background: #ffffff;
    padding-bottom: 40rpx;
    padding-top: 160rpx;
}
.listimage image {
    width: 100%;
    height: 540rpx;
}
.listitem {
    width: 48.1%;
    margin-bottom: 26rpx;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px;
}
.listbot {
    height: 50rpx;
}
</style>
